<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { videoPlay } from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css

const route = useRoute();
const videoMap = ref({
  odr: "https://videox.gzac.org/sv/odr_pt.mp4",
  zcr: "https://videox.gzac.org/sv/gz_zcr.mp4",
  xc: "https://videox.gzac.org/sv/xc_sp.mp4",
});
const videoOpt = ref({
  width: "100%", // 播放器高度
  height: "100%", // 播放器高度
  color: "#409eff", // 主题色
  // muted: false, // 静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], // 播放倍速
  autoPlay: true, // 自动播放
  loop: false, // 循环播放
  mirror: false, // 镜像画面
  ligthOff: true, // 关灯模式
  volume: 0.3, // 默认音量大小
  control: true, // 是否显示控制器
  title: "", // 视频名称
  src: "", // 视频源
  poster: "", // 封面
});

onMounted(async () => {
  videoOpt.value.src = videoMap.value[route.params.key];
});

const onPlay = (e) => {};
const onPause = (e) => {};
const onTimeupdate = (e) => {};
const onCanplay = (e) => {};
</script>

<template>
  <div class="photo">
    <!-- <div ref="outBox" class="outBox">
      <videoPlay
        class="video"
        v-bind="videoOpt"
        @play="onPlay"
        @pause="onPause"
        @timeupdate="onTimeupdate"
        @canplay="onCanplay"
      />
    </div> -->
    <videoPlay
      class="video"
      v-bind="videoOpt"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @canplay="onCanplay"
    />
  </div>
</template>

<style lang="less" scoped>
.photo {
  height: 100%;
  // background: url("@/assets/mobile/bg-empty.png") no-repeat bottom center;
  // background-size: cover;
  display: flex;
  background-color: #000;
  .outBox {
    width: calc(100vw * 0.9);
    height: calc(100vw * 0.9 * 0.625);
    padding: 16px 6px 6px 6px;
    margin: auto;
    // background: url("/src/assets/exhibition-bg.png") no-repeat center center;
    // -webkit-background-size: 100% 100%;
    // -o-background-size: 100% 100%;
    // background-size: 100% 100%;
    @media only screen and (orientation: landscape) {
      // 横向
      width: calc(100vw * 0.7);
      height: calc(100vw * 0.7 * 0.625);
    }
  }
}
</style>
